<template>
    <div class="box">
      <el-card>
        <template #header>
          <div class="login-title">
            <h3>商家登录</h3>
            <el-link @click="$router.push('/empLogin')">管理员登录</el-link>
          </div>
        </template>
        <el-form
          ref="refForm"
          label-width="100px"
          :model="businessData"
          :rules="rules"
        >
          <el-form-item label="商家账号" prop="account">
            <el-input v-model="businessData.account"></el-input>
          </el-form-item>
          <el-form-item label="商家密码" prop="password">
            <el-input v-model="businessData.password" @keydown.enter="login"></el-input>
          </el-form-item>
          <el-form-item>
            <el-space :size="30">
              <el-button @click="login" type="primary">登录</el-button>
              <el-button @click="resetForm" type="danger">重置</el-button>
              <el-link @click="$router.push('/businessRegist')"
                >没账号，去注册</el-link
              >
            </el-space>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  import { businessLoginAPI } from "@/api/business.js";
  export default {
    data() {
      return {
        businessData: {},
        // 表单验证规则
        rules: {
          account: { required: true, message: "账号不能为空", trigger: "blur" },
          password: [
            { required: true, message: "密码不能为空", trigger: "blur" },
            { min: 6, max: 12, message: "长度必须6~12位", trigger: "blur" },
          ],
        },
      };
    },
    methods: {
      // 点击页面上登录按钮
      login() {
        this.$refs.refForm.validate((valid) => {
          if (valid) {
            // 发送ajax
            businessLoginAPI(this.businessData).then((resp) => {
              // 登录成功之后
              if (resp.data == 0) {
                ElNotification({
                  type: "error",
                  message: "账号或密码为空",
                });
              } else if (resp.data == 1) {
                ElNotification({
                  type: "error",
                  message: "账号或密码错误",
                });
              } else {
                // 表示登录成功
                ElNotification({
                  type: "success",
                  message: "登录成功",
                });
                // 需要将商家的信息存放到本地存储中
                localStorage.setItem("loginInfo", JSON.stringify(resp.data));
                // 跳转到首页
                this.$router.push("/shopList");
              }
            });
          }
        });
      },
      // 点击页面上重置按钮
      resetForm() {
        this.$refs.refForm.resetFields();
      },
    },
  };
  </script>
  
  <style scoped>
  .box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(https://p1.meituan.net/travelcube/a5dfd35414dafdab196e459cea685f00231306.jpg);
  }
  .el-card {
    width: 500px;
    opacity: 0.85;
  }
  .login-title{
    display: flex;
    justify-content: space-between;
  }
  </style>
  